<template>

  <template v-if="mainState.visible">
    <!--搜索栏-->
    <CustomSearch
        :searchField="searchBarState.searchField"
        :searchData="searchBarState.searchData"
        :searchBarButton="searchBarState.searchBarButton"
    >
    </CustomSearch>
    <!--table-->
    <CustomTable
        ref="tableRef"
        :tableHead="tableState.tableHead"
        :isShowIndex="true"
        :isSelection="false"
        :isClickOne="false"
        v-model:selectMoreData="tableState.selectMoreData"
        v-model:selectOneData="tableState.selectOneData"
        :tableData="tableState.tableData"
        :tableOperateBar="tableState.tableOperateBar">
    </CustomTable>
    <!--分页-->
    <Pagination v-show="pageState.totalCount > 0"
                :total="pageState.totalCount"
                v-model:page="pageState.page"
                v-model:limit="pageState.limit"
                @pagination="getList"/>


    <!--对话框-->
    <CustomDialog
        v-model:visible="dialogState.visible"
        :title="dialogState.title"
        :width="dialogState.width"
        :destroyOnClose="dialogState.destroyOnClose"
    >
      <template #default>
        <!--搜索栏-->
        <CustomSearch
            :searchField="dialogSearchBarState.searchField"
            :searchData="dialogSearchBarState.searchData"
            :searchBarButton="dialogSearchBarState.searchBarButton"
        >
        </CustomSearch>
        <!--table-->
        <CustomTable
            :tableHead="dialogTableState.tableHead"
            :isShowIndex="true"
            :isSelection="false"
            :isClickOne="true"
            :height="'400'"
            v-model:selectMoreData="dialogTableState.selectMoreData"
            v-model:selectOneData="dialogTableState.selectOneData"
            :tableData="dialogTableState.tableData">
        </CustomTable>
        <div style="display: flex; margin-top:10px; justify-content: right">
          <span class="dialog-footer">
          <el-button @click="dialogState.visible = false">取消</el-button>
          <el-button type="primary" @click="setData">确认</el-button>
        </span>
        </div>
      </template>
    </CustomDialog>

  </template>

  <template v-else>
    <!--详情页面-->
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>详情页面</span>
          <el-button class="button" size="small" @click="mainState.visible=true">返回</el-button>
        </div>
      </template>
      <CustomForm
          :formField="formState.formField"
          :formData="formState.formData"
          :formRules="formState.formRules"
      ></CustomForm>
    </el-card>
  </template>
</template>

<script lang="ts" setup name="UserManage">
import {} from 'vue'
import {ElMessage, FormInstance, FormRules} from "element-plus";
import math from "@/utils/math";
import useRouterList from "@/store/module/routerList";
import pinia from "@/store";
import {number} from "echarts";

//性别
let sexList = reactive<Array<ISex>>([
  {
    label: '男',
    value: 1
  },
  {
    label: '女',
    value: 0
  }
]);
//部门
let orgList = reactive<Array<IOrg>>([
  {
    orgName: 'xx集团',
    orgCode: '10',
    children: [
      {
        orgName: '四川一区',
        orgCode: '10001',
        children: [
          {
            orgName: '医学诊断一部',
            orgCode: '10001001',
          },
          {
            orgName: '医学诊断二部',
            orgCode: '10001002',
          }
        ]
      },
      {
        orgName: '四川二区',
        orgCode: '10002',
        children: [
          {
            orgName: '专业诊断一部',
            orgCode: '10002001',
          },
          {
            orgName: '专业诊断二部',
            orgCode: '10002002',
          }
        ]
      },
      {
        orgName: '重庆大区',
        orgCode: '10003',
        children: [
          {
            orgName: '共建信息部',
            orgCode: '10003001',
          }
        ]
      }
    ]
  }
]);
//级联属性
let casProps = reactive<ICasProps>({
  label: 'orgName',
  value: 'orgCode',
  children: 'children',
  multiple: true,
  checkStrictly: false,
  emitPath: false
});

//表格数据定义
interface ITableDataType {
  data1?: string;
  data2?: number;
  data8?: string;
  data9?: Array<any>;
  data10?: number;
  data11?: number;
  data12?: number;
  disabled?: boolean;
}

const mainState = reactive({
  visible: true
})

//对话框
const dialogState = reactive<IDialog>({
  visible: false,
  title: "选择数据",
  width: 70,
  destroyOnClose: false
})
//对话框-搜索栏
const dialogSearchBarState = reactive<ISearchBar<ITableDataType>>({
  //搜索字段
  searchField: [
    {
      label: '姓名',
      //字段名称
      field: 'data1',
      span: 6,
      //表格类型
      inputType: 'string'
    },
  ],
  //搜索栏按钮
  searchBarButton: [
    {
      label: '查询',
      type: 'primary',
      // icon: 'Search',
      method: () => {
        ElMessage.success("查询success")
      },
    }
  ],
  //搜索条件
  searchData: {},
})
//对话框-table
const dialogTableState = reactive<ITable<ITableDataType>>({
  //表格header
  tableHead: [
    {
      label: '我是一级表头',
      width: 300,
      children: [
        {
          label: '姓名',
          field: 'data1',
          width: 150,
          inputType: 'readonly',
        },
        {
          label: '年龄',
          field: 'data2',
          width: 150,
          inputType: 'readonly',
        }
      ]
    },
    {
      label: '我是图片',
      field: 'data8',
      inputType: 'image',
      width: 230,
    },
  ],
  //表格数据
  tableData: [
    {
      data1: "李xx",
      data2: 20,
      data8: 'http://localhost:9999/image/WechatIMG11.png',
      // data8: 'http://p4.music.126.net/S8gDwBTGHnXAr25rRz_xGw==/109951166627342448.jpg?param=200y200',
      data9: [],
      disabled: false
    },
    {
      data1: "罗xx",
      data2: 10,
      disabled: false
    },
  ],
  selectMoreData: [],
  selectOneData: null,
  //选择的数据行index
  selectIndex: -1,
})

//列表-搜索栏
const searchBarState = reactive<ISearchBar<ITableDataType>>({
  //搜索字段
  searchField: [
    // {
    //   label: '姓名',
    //   //字段名称
    //   field: 'data1',
    //   span: 6,
    //   //表格类型
    //   inputType: 'edit'
    // },
    {
      label: '性别',
      //字段名称
      field: 'data2',
      span: 4,
      //表格类型
      inputType: 'select',
      selectList: sexList
    }
  ],
  //搜索栏按钮
  searchBarButton: [
    {
      label: '查询',
      type: 'primary',
      // icon: 'Search',
      method: () => {
        handleSearch()
      },
    }
  ],
  //搜索条件
  searchData: {},
})
//列表-table
const tableState = reactive<ITable<ITableDataType>>({
  //表格header
  tableHead: [
    {
      label: '我是一级表头',
      width: 300,
      children: [
        {
          label: '姓名',
          field: 'data1',
          width: 150,
          inputType: 'inputWithBtn',
          searchValue: (index: number, row: any) => {
            dialogState.visible = true;
            dialogTableState.selectIndex = index;
          }
        },
        {
          label: '性别',
          field: 'data2',
          width: 150,
          inputType: 'select',
          selectList: sexList,
        }
      ]
    },
    // {
    //   label: '我是图片',
    //   field: 'data8',
    //   inputType: 'image',
    //   width: 230,
    // },
    // {
    //   label: '我是级联选择',
    //   field: 'data9',
    //   inputType: 'cascader',
    //   width: 230,
    //   casOptions: orgList,
    //   casProps,
    //   casCollapse: true
    // },
    {
      label: '单价',
      field: 'data10',
      width: 180,
      inputType: 'number',
      max: 10000,
      precision: 2,
      step: 0.1,
      rules: [
        {required: true, message: '请输入单价', trigger: 'change'}
      ]
    },
    {
      label: '数量',
      field: 'data11',
      width: 180,
      inputType: 'number',
      max: 100,
      precision: 0,
      step: 1,
      rules: [
        {required: true, message: '请输入数量', trigger: 'change'}
      ]
    },
    {
      label: '总价',
      field: 'data12',
      width: 150,
      inputType: 'computed',
      getValue: (index: number, row: ITableDataType): number => {
        let v1 = row.data10 ? row.data10 : 0;
        let v2 = row.data11 ? row.data11 : 0;
        let v3 = math.setDecimal(math.multiply(v1, v2));
        row.data12 = v3;
        return v3;
      }
    },
    // {
    //   label: '我是年选择器',
    //   field: 'data3',
    //   inputType: 'year',
    //   width: 230,
    // },
    // {
    //   label: '我是月选择器',
    //   field: 'data4',
    //   inputType: 'month',
    //   width: 230,
    // },
    // {
    //   label: '我是年-月选择器',
    //   field: 'data5',
    //   inputType: 'yearMonth',
    //   width: 230,
    // },
    // {
    //   label: '我是年-月-日选择器',
    //   field: 'data6',
    //   inputType: 'yearMonthDay',
    //   width: 230,
    // },
    // {
    //   label: '我是date选择器',
    //   field: 'data7',
    //   inputType: 'datetime',
    //   width: 215,
    // },

  ],
  //表格数据
  tableData: [
    {
      data1: "李达",
      data2: 1,
      data8: 'http://localhost:9999/image/WechatIMG11.png',
      // data8: 'http://p4.music.126.net/S8gDwBTGHnXAr25rRz_xGw==/109951166627342448.jpg?param=200y200',
      data9: [],
      disabled: false
    },
    {
      data1: "罗果汁",
      data2: 0,
      disabled: false
    },
  ],
  //表格操作栏
  tableOperateBar: {
    width: 150,
    fixed: "right",
    list: [
      {
        label: "编辑",
        type: 'primary',
        method: (index: number, row: any) => {
          editRole(row);
        },
      },
      {
        label: "删除",
        type: 'danger',
        title: '确认删除这条数据？',
        method: (index: number, row: any) => {
          deleteRole(row);
        },
      },
    ],
  },
  selectMoreData: [],
  selectOneData: null
})
//列表-分页
const pageState = reactive<IPage>({
  totalCount: 2,
  page: 1,
  limit: 10,
})

//详情表单
const formState = reactive<IForm<any>>({
  formField: [
    {
      label: '合同类型',
      field: 'd1',
      width: 150,
      inputType: 'select',
      selectList: [{
        label: '常规合同',
        value: '常规合同'
      },
        {
          label: '框架合同',
          value: '框架合同'
        }],
    },
    {label: '项目编号', field: 'd2', inputType: 'string'},
    {label: '项目名称', field: 'd3', inputType: 'string'},
    {
      label: '合同内容类型',
      field: 'd4',
      width: 150,
      inputType: 'select',
      selectList: [{
        label: '新做',
        value: '新做'
      },
        {
          label: '修复',
          value: '修复'
        }],
    },
    {label: '产品等级', field: 'd5', inputType: 'string'},
    {label: '设备数量', field: 'd6', inputType: 'string'},
  ],
  formRules: {
    d1: [
      {required: true, message: '请选择合同类型', trigger: 'blur'},
      //{min: 3, max: 5, message: '名字的长度3～5之间', trigger: 'blur'},
    ],
  },
  formData: {
    d1: "常规合同",
    d2: "项目编号",
    d3: "项目名称",
    d4: "修复",
    d5: "A",
    d6: 0,
  }
})

//
const setData = () => {
  if (!dialogTableState.selectOneData) {
    ElMessage.error("请选择数据")
  } else {
    tableState.tableData[dialogTableState.selectIndex!].data1 = dialogTableState.selectOneData.data1;
    dialogState.visible = false;
  }

}

//总金额
const allMoney = computed(() => {
  return tableState.tableData.reduce((sum, v) => sum + math.setDecimal(v.data12), 0)
})


// let context: any = null;
// onMounted(() => {
//   context = getCurrentInstance()
// })

const tableRef = ref()
/**
 * 搜索栏《查询》
 */
const handleSearch = () => {
  //ElMessage.success(`总金额是：${allMoney.value}`)

  tableRef.value.validate()

}

/**
 * 删除数据
 */
const deleteRole = (row: any) => {
  row.disabled = true
  ElMessage.success({
    type: "success",
    message: "删除成功!",
  });
}

/**
 * 编辑数据
 */
const editRole = (row: any) => {
  // row.disabled = false
  // ElMessage.success({
  //   type: "success",
  //   message: `获取到编辑数据=>${row.data9}`,
  // });
  mainState.visible = false;
}

/**
 * 获取列表
 */
const getList = () => {
  ElMessage.success({
    type: "success",
    message: `查询数据success`,
  });
}
</script>

<style scoped lang='less'>
.card-header {
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
}
</style>
